<template>
    
  <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="住户姓名" prop="occupantName">
            <el-input v-model="form.occupantName" placeholder="请输入住户姓名" clearable
              :style="{width: '150px'}"></el-input>
          </el-form-item>
          <el-form-item label="住户手机" prop="occupantPhone">
            <el-input v-model="form.occupantPhone" placeholder="请输入住户手机" clearable
              :style="{width: '150px'}"></el-input>
          </el-form-item>
          <el-form-item label="住户地址" prop="occupantAddress">
            <el-input v-model="form.occupantAddress" placeholder="请输入住户地址" clearable
              :style="{width: '150px'}"></el-input>
          </el-form-item>
          <el-form-item label="住户地址" prop="occupantAddress">
             <el-select
      v-model="form.occupantType"
      placeholder="请选择用户类型"
      size="small"
      style="width: 150px"
      clearable
    >
      <el-option
        v-for="item in occType"
        :key="item.value"
        :label="item.lable"
        :value="item.value"
      />
    </el-select>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="show()">查询</el-button>
      <el-button @click="handleExport">导出</el-button>

          </el-form-item>
      </el-form>
  <el-table :data="tableData">
    <el-table-column prop="id" label="序号" />
    <el-table-column prop="occupantName" label="姓名" />
    <el-table-column prop="occupantAddress" label="身份证号" #default="s">
      {{s.row.occupantNo.substring(0,6)+"****" }}
    </el-table-column>
    <el-table-column prop="occupantAddress" label="房间" />
    <el-table-column prop="occupantGender" label="性别" />
    <el-table-column prop="occupantPhone" label="电话" #default="s">
      {{ s.row.occupantPhone.substring(0,3)+"****"  }}
    </el-table-column>
    <el-table-column prop="occupantTime" label="提交时间" />
    <el-table-column prop="occupantExpirationTime" label="有效期限" #default="s">
        <span v-if="s.row.occupantExpirationTime=='长期'">{{ s.row.occupantExpirationTime }}</span>
        <span v-else>{{ moment(s.row.occupantExpirationTime).format("YYYY-MM-DD") }}</span>
    </el-table-column>
    <el-table-column prop="occupantAddress" label="住户类型" #default="s">
      {{ ["业主", "租户", "快递","业主家属","物业人员","公司"][s.row.occupantType-1] }}
    </el-table-column>
    <el-table-column prop="occupantAddress" label="住户类型" #default="s">
      <span style="color:red">{{ ["待审核","已审核","已驳回","已迁出"][s.row.occupantAuditStatus] }}</span>
    </el-table-column>
    <el-table-column prop="occupantAddress" label="操作" #default="s" width="300px">
      <el-button type="info" @click="getOccDetail(s.row.id)">查看</el-button>
    </el-table-column>

  </el-table>
  <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 查看详情 -->
    <el-dialog v-model="dialogFormVisible.UpdateOccDis" title="审核页面">
    <el-form :model="form">
      <el-form-item label="编号" >
        <span>{{ getbyid.id }}</span>
      </el-form-item>
      <el-form-item label="住户姓名" >
        <span>{{ getbyid.occupantName }}</span>
      </el-form-item>
      <el-form-item label="住户电话" >
        <span>{{ getbyid.occupantPhone }}</span>
      </el-form-item>
      <el-form-item label="性别" >
        <span>{{ getbyid.occupantGender }}</span>
      </el-form-item>
      <el-form-item label="住址" >
        <span>{{ getbyid.occupantAddress }}</span>
      </el-form-item>
      <el-form-item label="身份证号" >
        <span>{{ getbyid.occupantNo }}</span>
      </el-form-item>
      <el-form-item label="住户类型" >
        <span>{{ getbyid.occupantType }}</span>
      </el-form-item>
      <el-form-item label="有效期限" >
        <span>{{ getbyid.occupantExpirationTime }}</span>
      </el-form-item>
      <el-form-item label="审核时间" >
        <span style="color: red">{{ getbyid.occupantTime }}</span>
      </el-form-item>
    </el-form>
    </el-dialog>
    
</template>
    
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { pageOccupantAudit, getOccById,updateOccEvery,BindHouse, updateStatus,excelExport } from '/@/api/UserManage/occupantAudit';
import moment from "moment";
import { ElMessage } from "element-plus";
const form = reactive({
  "occupantName": "",
  "occupantPhone": "",
  "occupantAddress": "",
  "occupantType": "",
  "pageIndex": 1,
  "pageSize": 10,
  "occStatus": 3
})
var total = 0;
const tableData = ref([]);
const show = () => {
  pageOccupantAudit(form).then(res => {
    tableData.value = res.data.result.items
    total=res.data.result.total
    console.log(res.data.result)
  })
    .catch(err => {
      console.log(err)
  })
}
const dialogFormVisible = reactive(
  {
        UpdateOccDis: false,
    UpdateEvery:false
  }
)

const handleSizeChange = (val: number) => {
  form.pageSize = val
show()
  
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val
  show()
}

const occType = [
  {
    lable: "业主",
    value:"1"
  },
  {
    lable: "租户",
    value:"2"
  },
  {
    lable: "快递",
    value:"3"
  },
  {
    lable: "业主家属",
    value:"4"
  },
  {
    lable: "物业人员",
    value:"5"
  },
  {
    lable: "公司",
    value:"6"
  },
]
const getbyid = reactive(
  {
    "id": 0,
      "occupantName": "",
      "occupantPhone": "",
      "occupantGender": "",
      "occupantAddress": "",
      "occupantNo": "",
      "occupantType": "",
      "occupantExpirationTime": 1,
    "occupantTime": "",
  }
)
var RadioTime=ref()

const getOccDetail = (id: number) => {
  dialogFormVisible.UpdateOccDis = true;
  getOccById(id).then(res => {
    getbyid.id=res.data.result.data.id,
    getbyid.occupantName=res.data.result.data.occupantName,
    getbyid.occupantPhone=res.data.result.data.occupantPhone,
    getbyid.occupantGender=res.data.result.data.occupantGender,
    getbyid.occupantAddress=res.data.result.data.occupantAddress,
    getbyid.occupantNo=res.data.result.data.occupantNo,
    getbyid.occupantType=res.data.result.data.occupantType,
    getbyid.occupantTime = res.data.result.data.occupantTime
    getbyid.occupantExpirationTime = res.data.result.data.occupantExpirationTime
  })
    .catch(err => {
    console.log(err)
  })
}
const getOccDetail1 = (id: number) => {
  dialogFormVisible.UpdateEvery = true;
  getOccById(id).then(res => {
    getbyid.id=res.data.result.data.id,
    getbyid.occupantName=res.data.result.data.occupantName,
    getbyid.occupantPhone=res.data.result.data.occupantPhone,
    getbyid.occupantGender=res.data.result.data.occupantGender,
    getbyid.occupantAddress=res.data.result.data.occupantAddress,
    getbyid.occupantNo=res.data.result.data.occupantNo,
    getbyid.occupantType=res.data.result.data.occupantType,
          getbyid.occupantTime = res.data.result.data.occupantTime
      if (res.data.result.data.occupantExpirationTime == "长期") {
        getbyid.occupantExpirationTime=1
      } else {
          getbyid.occupantExpirationTime = 2
        RadioTime = res.data.result.data.occupantExpirationTime
      }
  })
    .catch(err => {
    console.log(err)
  })
}


const updateEveryOutput = reactive(
    {
        "id": 0,
        "occupantName": "",
        "occupantPhone": "",
        "occupantGender": true,
        "occupantAddress": "",
        "occupantNo": "",
        "occupantType": "",
        "occupantExpirationTime": ""
    }
)
const houseBind=ref()
const bind = () => {
    BindHouse().then(res => {
        houseBind.value=res.data.result
    })
        .catch(err => {
        console.log(err)
    })
}
const updateStatusDTO = reactive({
  "id": 0,
  "occupantStatus": 0,
  "occupantExpirationTime": ""
})
const updateOccStatus = (occupantStatus: number) => {
  updateStatusDTO.id = getbyid.id
  updateStatusDTO.occupantStatus = occupantStatus
  if (getbyid.occupantExpirationTime == 1) {
    updateStatusDTO.occupantExpirationTime="长期"
  }
  if (getbyid.occupantExpirationTime == 2) {
    updateStatusDTO.occupantExpirationTime=RadioTime
  }
  
  updateStatus(updateStatusDTO)
    .then(res => {
      if (res.data.result.data.code == 200) {
        ElMessage.success(res.data.result.data.msg)
        dialogFormVisible.UpdateOccDis=false
        show()
        
      }
      else {
        ElMessage.error(res.data.result.msg)
    }
    }).catch(err => {
      console.log(err)
    })
}
const handleExport = async () => {
    try {
        const res = await excelExport(form);
        const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        const link = document.createElement('a');
        link.setAttribute('href', URL.createObjectURL(blob));
        link.setAttribute('download', '住户名单.xlsx');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        URL.revokeObjectURL(link.href);
    } catch (error) {
        console.error('Error in handleExport:', error);
        // 可以在这里添加代码显示一个错误提示框给用户，比如使用 alert 或者其他UI组件库提供的提示方式
        alert('导出住户名单时出现错误，请稍后再试。');
    }
};
onMounted(() => {
    show()
  bind()
})
</script>
